<template>
     <div class="largeScreen">
          <!-- 标题栏 -->
          <div class="title">
               <TitleBox />
               <div class="settingContainer">
                    <Setting />
                    <el-button
                         size="small"
                         type="primary"
                         circle
                         @click="toggleExpand"
                         class="expand-btn"
                         :title="isExpand ? '收起侧边栏' : '展开侧边栏'"
                    >
                         <i
                              class="iconfont"
                              :class="
                                   isExpand
                                        ? 'icon-shouqi-copy'
                                        : 'icon-zhankai'
                              "
                         ></i>
                    </el-button>
               </div>
          </div>

          <!-- 主内容区 - 添加过渡动画 -->
          <transition name="content-fade">
               <div class="content" key="content">
                    <!-- 左侧内容区域 -->
                    <transition name="slide-left">
                         <div class="leftContent" v-if="isExpand">
                              <ItemBox title="报警列表" class="itemBox">
                                   <Left1Box />
                              </ItemBox>
                              <ItemBox title="报警统计" class="itemBox">
                                   <Left2Box />
                              </ItemBox>
                              <ItemBox title="设备异常报警" class="itemBox">
                                   <Left3Box />
                              </ItemBox>
                              <ItemBox title="设备异常报警" class="itemBox">
                                   <Left4Box />
                              </ItemBox>
                         </div>
                    </transition>

                    <!-- 中心地图区域 -->
                    <div class="mapContainer">
                         <CenterBox />
                    </div>

                    <!-- 右侧内容区域 -->
                    <transition name="slide-right">
                         <div class="rightContent" v-if="isExpand">
                              <ItemBox title="设备状态统计" class="itemBox">
                                   <Right1Box />
                              </ItemBox>
                              <ItemBox title="设备状态列表" class="itemBox">
                                   <Right2Box />
                              </ItemBox>
                              <ItemBox title="电池警告列表" class="itemBox">
                                   <Right3Box />
                              </ItemBox>
                              <ItemBox title="电池警告列表" class="itemBox">
                                   <Right4Box />
                              </ItemBox>
                         </div>
                    </transition>
               </div>
          </transition>
     </div>
</template>

<script setup lang="ts">
// 导入Vue核心方法
import { ref } from 'vue'

// 导入组件
import TitleBox from './components/titleBox.vue'
import ItemBox from './components/itemBox.vue'
import CenterBox from './components/cneterBox/index.vue'

// 导入左侧组件
import Left1Box from './components/left1Box.vue'
import Left2Box from './components/left2Box.vue'
import Left3Box from './components/left3Box.vue'
import Left4Box from './components/left4Box.vue'

// 导入右侧组件
import Right1Box from './components/right1Box.vue'
import Right2Box from './components/right2Box.vue'
import Right3Box from './components/right3Box.vue'
import Right4Box from './components/right4Box.vue'

import Setting from '@/layoutLargeScreen/header/setting/index.vue'
// 侧边栏展开状态
const isExpand = ref(true)

/**
 * 切换侧边栏展开/收起状态
 */
const toggleExpand = () => {
     isExpand.value = !isExpand.value
}
</script>

<style lang="scss" scoped>
.largeScreen {
     // 定义变量
     --primary-color: #27bfff;
     --bg-image: url('@/assets/images/largeScreen/背景.png');
     --header-bg: url('@/assets/images/largeScreen/头部标题.png');
     --transition-duration: 0.3s;
     --sidebar-width: 23%;
     --sidebar-gap: 10px;

     // 基础样式
     width: 100%;
     height: 100%;
     z-index: 9999;
     background: var(--bg-image) no-repeat center;
     background-size: 100% 100%;
     overflow: hidden;

     .title {
          width: 100%;
          height: 70px;
          background: var(--header-bg) no-repeat center;
          background-size: 100% 100%;
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;

          .settingContainer {
               display: flex;
               align-items: center;
               gap: 10px;
               position: absolute;
               right: 15px;
               top: 10px;
               z-index: 9999;

               .expand-btn {
                    transition: all var(--transition-duration) ease;
                    background: rgba(39, 191, 255, 0.2);
                    border-color: var(--primary-color);
                    color: var(--primary-color);

                    &:hover {
                         background: rgba(39, 191, 255, 0.4);
                         transform: scale(1.1);
                    }

                    .iconfont {
                         font-size: 12px;
                    }
               }
          }
     }

     .content {
          width: 100%;
          height: calc(100% - 70px);
          display: flex;
          justify-content: center;
          align-items: flex-start;
          padding: 0 10px;
          gap: 15px;
          margin-top: 10px;

          .mapContainer {
               width: calc(54% - 30px);
               height: calc(100% - 20px);
          }

          .leftContent,
          .rightContent {
               width: var(--sidebar-width);
               height: calc(100% - 20px);
               display: flex;
               flex-direction: column;
               gap: var(--sidebar-gap);

               .itemBox {
                    width: 100%;
                    height: 25%;
                    transition: all var(--transition-duration) ease;
               }
          }
     }
}

/* 内容过渡动画 */
.content-fade-enter-active,
.content-fade-leave-active {
     transition: all 0.5s ease;
}

.content-fade-enter-from {
     opacity: 0;
     transform: translateY(10px);
}

.content-fade-leave-to {
     opacity: 0;
     transform: translateY(-10px);
}

/* 侧边栏过渡动画 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
     transition: all var(--transition-duration) ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
     transform: translateX(calc(var(--sidebar-width) * -1));
     opacity: 0;
}

.slide-right-enter-from,
.slide-right-leave-to {
     transform: translateX(var(--sidebar-width));
     opacity: 0;
}

/* 响应式调整 */
@media (max-width: 1600px) {
     .largeScreen {
          --sidebar-width: 22%;
     }
}

@media (max-width: 1440px) {
     .largeScreen {
          --sidebar-width: 24%;
     }
}
</style>
